<template>
	<view class="content">
		<swiper class="swiper" circular :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval"
			:duration="duration">
			<swiper-item v-for="item in images" :key="item">
				<view class="swiper-item">
					<image :src="`https://applet.spzn.top/taotun/static/${item}`"></image>
				</view>
			</swiper-item>
		</swiper>
		<view class="tabBox">
			<view :class="tab==0 ? 'active':''" @click="onTab(0)">冰柜类</view>
			<view :class="tab==1 ? 'active':''" @click="onTab(1)">不锈钢类</view>
			<view :class="tab==2 ? 'active':''" @click="onTab(2)">机电类</view>
			<view :class="tab==3 ? 'active':''" @click="onTab(3)">灶具类</view>
			<view :class="tab==4 ? 'active':''" @click="onTab(4)">桌椅类</view>
		</view>
		<view class="listBox" v-for="item in list" :key="item.title">
			<view class="left">
				<image :src="item.imgUrl"></image>
			</view>
			<view class="right">
				<view class="title">{{item.title}}</view>
				<view class="time">
					<image src="https://applet.spzn.top/taotun/static/pro_time.png"></image>
					<text>{{item.time}}</text>
				</view>
				<view class="time">
					<image src="https://applet.spzn.top/taotun/static/pro_view.png"></image>
					<text>{{item.view}}</text>
					<image src="https://applet.spzn.top/taotun/static/pro_like.png" style="margin-left: 12rpx;"></image>
					<text>{{item.like}}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			const today = new Date();
			const y = today.getFullYear();
			const m = today.getMonth() + 1;
			const d = today.getDate();
			const currentDate = y + '-' + (m < 10 ? '0' + m : m) + '-' + (d < 10 ? '0' + d : d);
			return {
				images: ['pro_banner1.png', 'pro_banner2.png'],
				indicatorDots: true, // 是否显示面板指示点
				autoplay: true, // 是否自动切换
				interval: 3000, // 自动切换时间间隔
				duration: 500, // 滑动动画时长
				tab: null,
				defList: [{
						title: '冰柜类',
						time: currentDate,
						view: 366,
						like: 158,
						imgUrl: 'https://applet.spzn.top/taotun/static/binggui.jpg'
					},
					{
						title: '不锈钢类',
						time: currentDate,
						view: 258,
						like: 175,
						imgUrl: 'https://applet.spzn.top/taotun/static/buxiugang.jpg'
					},
					{
						title: '机电类',
						time: currentDate,
						view: 231,
						like: 166,
						imgUrl: 'https://applet.spzn.top/taotun/static/jidian.jpg'
					},
					{
						title: '灶具类',
						time: currentDate,
						view: 366,
						like: 158,
						imgUrl: 'https://applet.spzn.top/taotun/static/zaoju.jpg'
					},
					{
						title: '桌椅类',
						time: currentDate,
						view: 456,
						like: 198,
						imgUrl: 'https://applet.spzn.top/taotun/static/zhuoyi.png'
					}
				],
				list: []
			}
		},
		onShow() {
			this.tab = null;
			this.list = this.defList
		},
		// onLoad() {
		// 	this.list = this.defList
		// },
		onShareAppMessage() {
			return {
				title: '淘屯新旧二手厨具城',
				path: '/pages/index/index'
			}
		},
		methods: {
			onTab(val) {
				this.tab = val;
				this.list = [this.defList[val]];
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import url(./index.module.scss);
</style>